<template>
    <div>
        <ul class="alpha-list">
            <li 
            class="item" 
            v-for="(item,key) of cities" 
            :key="key"
            @click="getLetter"
            >
            {{key}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'CityBet',
    props:{
        cities:Object
    },
    methods:{
        getLetter(e){
            this.$emit('change',e.target.innerText)  
        }
    }
}
</script>
<style lang="stylus" scoped>
    .alpha-list
        display :flex
        flex-direction :column
        justify-content :center
        position:absolute
        top:0
        right:0
        bottom:0
        width:.4rem
        .item
            color:#23cc77
            line-height :.35rem
            text-align :center
</style>
